<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			/*时间轴*/
			*{margin: 0;padding: 0;}
.history {
	background:url(img/shijian1.jpg) no-repeat 2px 0;
	overflow:hidden;
	position:relative;
}
.history-date {
	overflow:hidden;
	position:relative;
}

.history-date ul li {width: 293px;padding-left: 27px;
	background:url(img/shijian3.jpg) no-repeat 0px 0;
	zoom:1;height: 118px;list-style: none;
}
.history-date ul li .tu_list{height: 50px;}
.history-date ul li .tu_list img{width: 40px;height: 40px; float: left;margin-right: 12px;}
.history-date ul li .tu_list span,.history-date ul li .tu_list strong{width: 110px;display: block;float: left;color: #777777;font-size: 12px;}
.history-date ul li h5{background: url(img/shijian2.jpg) no-repeat;color: #777777;height: 28px;font-weight: normal;padding-left: 12px;padding-top: 3px;}
.history-date ul li .tu_list strong{color: #c9c9c9;line-height: 27px;width:140px;font-weight: normal;}
.history-date ul li .neirong a{color: #777777;font-size: 12px;height: 30px;width: 290px;display: block;}
.history-date ul .fast{background: none;height: 60px;}
.history-date ul li.last {
	padding-bottom:0;
}
.history-date ul li:after {
	content:" ";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.history-date ul li h3 {
	float:left;
	width:168px;
	text-align:right;
	padding-right:19px;
	color:#c3c3c3;
	font:normal 18px/16px Arial;
}
.history-date ul li h3 span {
	display:block;
	color:#d0d0d0;
	font-size:12px;
}
.history-date ul li dl {
	float:left;
	padding-left:41px;
	margin-top:-5px;
	font-family:微软雅黑;
}
.history-date ul li dl dt {
	font:20px/22px 微软雅黑;
	color:#737373;
}
.history-date ul li dl dt span {
	display:block;
	color:#787878;
	font-size:12px;
}
.history-date ul li.green h3 {
	color:#1db702;
}
.history-date ul li.green h3 span {
	color:#a8dda3;
}
.history-date ul li.green dl {
	margin-top:-8px;
}
.history-date ul li.green dl dt {
	font-size:30px;
	line-height:28px;
}
.history-date ul li.green dl dt a {
	display:inline-block;
*display:inline;
	zoom:1;
	overflow:hidden;
	vertical-align:middle;
	margin-left:12px;
}
.history-date ul li.green dl dd {
	padding-top:20px;
	display:none;
}
.history-date ul li.green dl dd img {
	float:left;
}
.history-date ul li.green dl dd p {
	overflow:hidden;
	zoom:1;
	line-height:21px;
	color:#787878;
}
.history-date h2.first .more-history {
	font-size:16px;
	background:transparent;
	margin-left:30px;
}
.history-date h2.first .more-history:hover {
	text-decoration:underline;
}
*body .history-date ul li dl dt {
	_font-size:12px!important;
	_font-weight:bold;
}
*body .history-date ul li dl dt span {
	_font-weight:normal!important;
}
*body .history-date ul li.green dl dt a {
	_background:transparent!important;
*background:transparent!important;
*font-size:12px!important;
	_font-weight:normal!important;
}
		</style>
		<script type="text/javascript">
			/*时间轴*/
$(function(){
	systole();
});

function systole(){
	if(!$(".history").length){
		return;
	}
	var $warpEle = $(".history-date"),
		$targetA = $warpEle.find("h2 a,ul li dl dt a"),
		parentH,
		eleTop = [];
	
	parentH = $warpEle.parent().height();
	$warpEle.parent().css({"height":59});
	
	setTimeout(function(){
		
		$warpEle.find("ul").children(":not('h2:first')").each(function(idx){
			eleTop.push($(this).position().top);
			$(this).css({"margin-top":-eleTop[idx]}).children().hide();
		}).animate({"margin-top":0}, 1600).children().fadeIn();

		$warpEle.parent().animate({"height":parentH}, 2600);

		$warpEle.find("ul").children(":not('h2:first')").addClass("bounceInDown").css({"-webkit-animation-duration":"2s","-webkit-animation-delay":"0","-webkit-animation-timing-function":"ease","-webkit-animation-fill-mode":"both"}).end().children("h2").css({"position":"relative"});
		
	}, 600);

	$targetA.click(function(){
		$(this).parent().css({"position":"relative"});
		$(this).parent().siblings().slideToggle();
		$warpEle.parent().removeAttr("style");
		return false;
	});
};
		</script>
	</head>
	<body>
		<div class="history">
		<div class="history-date">
									<ul>
										<li class="fast">
											<span class="ba_a">
								最新动态
							</span>
										</li>
										<li >
											<h5>45分钟前</h5>
											<div class="tu_list">
												<img src="img/dongtai_1.png"/>
												<span>孟先进</span>
												<strong>高中政治 高级教师</strong>
											</div>
											<div class="neirong">
												<a href="#">上传教学案例《如何让学生在成长过程更快乐…》</a>
											</div>
										</li>
										<li >
											<h5>45分钟前</h5>
											<div class="tu_list">
												<img src="img/dongtai_2.png"/>
												<span>孟先进</span>
												<strong>高中政治 高级教师</strong>
											</div>
											<div class="neirong">
												<a href="#">上传教学案例《如何让学生在成长过程更快乐…》</a>
											</div>
										</li>
										<li >
											<h5>45分钟前</h5>
											<div class="tu_list">
												<img src="img/dongtai_1.png"/>
												<span>孟先进</span>
												<strong>高中政治 高级教师</strong>
											</div>
											<div class="neirong">
												<a href="#">上传教学案例《如何让学生在成长过程更快乐…》</a>
											</div>
										</li>
										<li >
											<h5>45分钟前</h5>
											<div class="tu_list">
												<img src="img/dongtai_2.png"/>
												<span>孟先进</span>
												<strong>高中政治 高级教师</strong>
											</div>
											<div class="neirong">
												<a href="#">上传教学案例《如何让学生在成长过程更快乐…》</a>
											</div>
										</li>
									</ul>
								</div>
		</div>
	</body>
</html>
